<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

  <script src="./render.js"></script>
  <script>

    //1.通过h函数来创建一个vnode
    const vnode = h('div', { class: 'yzh' }, [
      h('h2', null, '当前计数: 100'),
      h('button', { onClick: function () { console.log('111'); } }, '+1')
    ]);

    //2.通过mount函数，将vnode挂载到#app上
    mount(vnode, document.querySelector('#app'))

    //3.创建新的vnode 通过patch函数对比
    setTimeout(() => {
      // const vnode2 = h('div', { class: 'qqq', id: 'www', onClick: function () { console.log('vnode2'); } }, '呵呵呵呵呵')
      const vnode2 = h('div', { class: 'qqq', id: 'www', onClick: function () { console.log('vnode2'); } }, [
        h('h1', { class: 'text' }, "我是h1"),
        h('h2', { class: 'text2' }, "我是h2"),
        h('h3', { class: 'text3' }, "我是h3"),
        h('h4', { class: 'text4' }, "我是h4"),
        h('button', { type: 'button' }, "v2的btn")
      ])
      patch(vnode, vnode2)
    }, 2000)

  </script>

</body>

</html>